<template>
	<view class="bg-[#F2F2F2] p-0.5 overflow-auto"  :style="`height: ${screenHeight}px;`">
		<uni-card :is-shadow="false" class="px-0">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="baseFormData" :rules="rules" label-align="right" label-width="75px">
				<uni-forms-item label="单号" name="courierNumber" required class="items-center">
					<view v-if="FormType === 1">{{ baseFormData.courierNumber }}</view>
					<uni-easyinput v-else v-model="baseFormData.courierNumber" placeholder="请输入单号" />
				</uni-forms-item>
				<uni-forms-item label="货物品名" name="cargoName" required class="items-center">
					<uni-easyinput v-model="baseFormData.cargoName" placeholder="请输入货物品名" />
				</uni-forms-item>
				<uni-forms-item name="cargoType" class="!mb-1 items-center">
					<template #label>
						<uni-tooltip 
							content="因申报不实影响报关放行的将承担相应表任，货物入库时我司可根据实收情况做修改。"
							placement="right" 
							class="w-[75px] pr-3 flex flex-col justify-center"
							popper-class="atooltip"
						>
							<text class="text-right">货物类型</text>
							<text class="text-right text-xs">(点击查看)</text>
						</uni-tooltip>
					</template>
					<uni-data-select
						class="min-w-[100px]"
						v-model="baseFormData.cargoTypeId"
						:localdata="cargoTypeList"
						:clear="false"
					/>
				</uni-forms-item>
				<uni-forms-item label="货物价值" name="cargoValue" class="items-center">
					<uni-easyinput v-model="baseFormData.cargoValue" type="number" placeholder="请输入货物价值" />
				</uni-forms-item>
				<uni-forms-item label="数量" name="cargoQuantity" class="items-center">
					<uni-easyinput v-model="baseFormData.cargoQuantity" type="number" placeholder="请输入数量" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remarks" class="items-center">
					<uni-easyinput v-model="baseFormData.remarks" type="textarea" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<view class="flex justify-center">
				<button class="button" type="primary" size="mini" @click="submit">{{ FormType === 1 ? '编辑' : '新增' }}</button>
			</view>
		</uni-card>
		<scroll-view>
			<view class="overflow-auto" :style="`height: ${screenHeight - 480}px;`">
				<uni-title class="h4" type="h4" color="red" title="海运普货:" />
				<text class="text-xs">无仿牌的服铈、鞋包、母婴用品、运动用品、家具、电器、家居日用品，不含酒精的洗护用品,非禁运类书籍等</text>
				<uni-title class="h4" type="h4" color="red" title="海运特货:" />
				<text class="text-xs">磁性，化妆品，香水，保健品，食品，少量非禁运的药品(需向客服确认)</text>
				<uni-title class="h4" type="h4" color="red" title="国际EMS 文件:" />
				<text class="text-xs">国际EMS 文件:文件类产品</text>
				<uni-title class="h4" type="h4" color="red" title="国际EMS 物品:" />
				<text class="text-xs">非禁运类物品</text>
				<uni-title class="h4" type="h4" color="red" title="*禁运物品*" />
				<text class="text-xs">1.活物类(动植物),须冷藏物品，种子类，粉末类，液体类，烟草类，酒精，原木，原土，原石，动物毛皮，骨头，尸体，骨灰，动植物制品。</text>
				<uni-title class="h4" type="h4" color="red" title="2.现金，货币，古董，贵金属。" />
				<uni-title class="h4" type="h4" color="red" title="3.药品类" />	
				<text class="text-xs">(麻醉类、素类、处方药、抗生素类、人胎素类、精神类、催眠药品)医学类样品。</text>
				<uni-title class="h4" type="h4" color="red" title="4.危险品，仿真枪，易燃易爆，喷雾，气体，针管(有针头)" />
				<text class="text-xs">带有液压阀或者气压阀的物品，腐蚀性物品，军火，枪支弹药，管制刀具，毒品，毒药，放射性物质。</text>
				<uni-title class="h4" type="h4" color="red" title="" />	
				<text class="text-xs">含有反动，淫秽或有伤风化内容的报刊书籍、图片、宣传品、音像制品、激光视盘、盗版书籍和光碟。</text>
				<uni-title class="h4" type="h4" color="red" title="6.纯电池类，电动车，电平衡车。" />	
				<text class="text-xs">(可单票向客服咨询确认)</text>
				<uni-title class="h4" type="h4" color="red" title="7.其他中国禁限出口及进口国家当地法律禁止进口的物品。" />
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { addPackage, editPackage } from '@/api/modules/package.js'
	import store from '@/store'
	const { user, dict } = store()
	
	const baseConfigForm = {
		courierNumber: '',
		cargoName: '',
		cargoTypeId: 1,
		cargoValue: 1,
		cargoQuantity: 1,
		remarks: ''
	}
	
	const FormType = ref(0) // 当前包裹对象类型 0: 新增 1: 编辑
	const baseForm = ref(null) // 表单对象
	const baseFormData = ref({ ...baseConfigForm })
	const rules = ref({
		courierNumber: {
			rules: [{
				required: true,
				errorMessage: '请输入单号',
			}]
		},
		cargoName: {
			rules: [{
				required: true,
				errorMessage: '请输入货物品名',
			}]
		},
		cargoValue: {
			rules: [{
				required: true,
				errorMessage: '请输入货物价值',
			}, {
				validateFunction:function(rule,value,data,callback){
					if (value <= 0) {
						callback('不可为0')
					}
					return true
				}
			}]
		},
		cargoQuantity: {
			rules: [{
				required: true,
				errorMessage: '请输入数量',
			}, {
				validateFunction:function(rule,value,data,callback){
					if (value <= 0) {
						callback('不可为0')
					}
					return true
				}
			}]
		},
		remarks: {
			rules: [{
				required: true,
				errorMessage: '请输入备注',
			}]
		}
	})
	
	const screenHeight = computed(() => {
		return uni.getSystemInfoSync().windowHeight
	})
	const cargoTypeList = computed(() => {
		return dict.cargoType.map(item => {
			return {
				text: item.cargoName,
				value: item.id
			}
		})
	})
	
	const submit = () => {
		baseForm.value.validate().then(res=>{
			// 找出货物类型给出cargoType和cargoTypeId
			const cargoTypeLabel = cargoTypeList.value.find(item => {
				return item.value === baseFormData.value.cargoTypeId
			})
			const config = {
				...baseFormData.value,
				shopId: user.userInfo.shopId,
				userId: user.userInfo.userId,
				cargoType: cargoTypeLabel.text,
				userName: user.userInfo.userNamevalue
			}
			console.log(config)
			if(FormType.value === 1) {
				editPackage(config).then(res => {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			} else {
				addPackage(config).then(res => {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		}).catch(err =>{
			console.log('表单错误信息：', err);
		})
	}
	
	// 获取传入的参数
	onMounted(() => {
		// 获取上个页面传入的值
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();
	
		eventChannel.on('recivePack', function(data) {
			FormType.value = data.type || 0
			const { courierNumber, cargoName, cargoTypeId, cargoValue, cargoQuantity, remarks, ...value } = data.data
			const config = { courierNumber, cargoName, cargoTypeId, cargoValue, cargoQuantity, remarks, productId: value.id }
			baseFormData.value = Object.assign({}, { ...baseConfigForm }, config)
		})
	})
	
</script>

<style scoped>
.uni-tooltip:hover .uni-tooltip-popup {
	width: 220px;
	color: red;
	transform: translate(-5px, -50%) !important;
}

.atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-top-color: pink;
}
.atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
  border-top-color: pink;
}
.atooltip {
  background: pink !important;
}
</style>
